<template>
  <div class="app-container calendar-list-container">
    <div class="w-body">
      <el-form ref="entity" label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="当前订单" prop="orderNo">
              <el-input v-model="orderNo" :readonly="true">
                <el-button slot="append" icon="el-icon-search" @click="openOrder"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户" prop="customerName">
              <el-input v-model="entity.customerName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态" prop="orderStatus">
              <el-select v-model="queryEntity.orderStatus" :disabled="view" placeholder="请选订单状态" :clearable="true">
                <el-option v-for="(type,index) in sendOrderStatus" :label="type.name" :value="type.value" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="w-table">
        <buttons :showQuery="true" :showBack="false" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="订单号" :permissions="permissions" @add="doAdd"></buttons>
        <grid gridTitle="发货订单" :columns="columns" :enableEdit="false" :url="url" :loading="true" ref="mainGrid" height="auto" diffHeight="125" :pagination="true"
          :permissions="permissions" :queryEntity="queryEntity" :multi="false" @change="rowCilck" @edit="doEdit" @view="doView" @pass="doPass" @cancel="doCancel" @delete="doDelete"
          @printView="doPrintView" @print="doPrint" @export="doExport">
        </grid>
      </div>
    </div>
    <GridDialog ref="orderGridDialog" :multi="false" :url="orderUrl" :columns="orderColumns" @select="selectOrderData" :permissions="permissions" :queryEntity="orderQueryEntity"
      :queryList="orderQueryList">
    </GridDialog>
  </div>
</template>
<script>
import request from '@/router/axios'
import { Message, MessageBox } from 'element-ui'
import url from '@/const/apiURL'
import GridDialog from '@/components/GridDialog'
import grid from '@/components/Grid'
import { mapGetters } from 'vuex'
import { queryField } from '@/const/query'
import buttons from '@/components/Buttons'
import { SaleOutOrderStatusFormatter, YesOrNoFormatter } from '@/const/dict'
import { getLodop } from '@/const/lodop'
import { bgColor } from '@/const/bgColor'
import { dict } from '@/const/dict'

export default {
  components: { GridDialog, grid, buttons },
  data () {
    return {
      orderQueryEntity: { orderStaus: 'PROD' },
      orderNo: '',
      sendOrderStatus: dict().SaleOutOrderStatus,
      url: url.SEND_LIST_URL,
      orderQueryList: queryField().order,
      orderUrl: url.ORDER_LIST_URL,
      disabled: true,
      template: null,
      queryEntity: { includeStatus: ["UN_OUT", "UN_CHECK", "FINISH"] },
      entity: {
        customerCode: '',
        customerName: '',
      },
      columns: [
        {
          label: '操作', width: 270, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '编辑', clickName: 'edit', auth: 'send_edit', ctr: true, valueProp: "orderStatus", showValue: ["UN_CHECK"] },
            { name: '查看', clickName: 'view', auth: 'send_view', ctr: true },
            { name: '通过', clickName: 'pass', auth: 'send_pass', ctr: true, confirm: true, valueProp: "orderStatus", showValue: ["UN_CHECK"] },
            { name: '取消', clickName: 'cancel', auth: 'send_cancel', ctr: true, confirm: true, valueProp: "orderStatus", showValue: ["UN_OUT", "FINISH"] },
            { name: '删除', clickName: 'delete', auth: 'send_delete', ctr: true, confirm: true, valueProp: "orderStatus", showValue: ["UN_CHECK"] },
            { name: '打印预览', clickName: 'printView', auth: 'yes', ctr: true },
            { name: '打印', clickName: 'print', auth: 'yes', ctr: true },
            { name: '导出', clickName: 'export', auth: 'yes', ctr: true }
          ]
        },
        { label: '订单号', width: 180, prop: 'orderNo', align: 'left' },
        { label: '发货单号', width: 180, prop: 'sendCode', align: 'left' },
        { label: '仓库名称', width: 120, prop: 'warehouseName', align: 'left' },
        { label: '客户名称', width: 200, prop: 'customerName', align: 'left' },
        { label: '卷数', width: 100, prop: 'total', align: 'center' },
        { label: '数量', width: 100, prop: 'quantity', align: 'center' },
        { label: '总价', width: 110, prop: 'totalAmount', align: 'center' },
        { label: '订单状态', width: 100, prop: 'orderStatus', align: 'center', formatter: SaleOutOrderStatusFormatter, template: 'bgColor', bgColor: bgColor().SaleOutOrderStatus },
        { label: '是否对账', width: 80, prop: 'billStatus', align: 'center', formatter: YesOrNoFormatter, template: 'bgColor', bgColor: bgColor().YesOrNo },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      orderColumns: [
        { label: '订单号', width: 180, prop: 'orderNo', align: 'left' },
        { label: '客户名称', width: 200, prop: 'customerName', align: 'left' },
        { label: '数量', width: 100, prop: 'quantity', align: 'center' }
      ],
      btnList: [
        { name: '发货', type: 'primary', icon: 'edit', click: 'add', auth: 'send_add', ctr: false },
        //{ name: '编辑', type: 'primary', icon: 'edit', click: 'edit', auth: 'send_edit', ctr: true },
        // { name: '查看', type: 'primary', icon: 'edit', click: 'view', auth: 'send_view', ctr: true },
        //  { name: '通过', type: 'primary', icon: 'edit', click: 'pass', auth: 'send_pass', ctr: true, confirm: true },
        //  { name: '取消', type: 'primary', icon: 'edit', click: 'cancel', auth: 'send_cancel', ctr: true, confirm: true },
        //  { name: '删除', type: 'primary', icon: 'edit', click: 'delete', auth: 'send_delete', ctr: true, confirm: true },
        //  { name: '打印预览', type: 'primary', icon: 'edit', click: 'printView', auth: 'send_delete', ctr: true }
      ]
    }
  },
  created () {
    this.orderNo = this.$route.query.orderNo
    this.init()
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    init () {
      this.initLodop()
      if (this.orderNo) {
        this.initData()
      }
    },
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    initLodop () {
      LODOP = getLodop()
      LODOP.PRINT_INIT('') //打印初始化
      LODOP.SET_PRINT_MODE("PROGRAM_CONTENT_BYVAR", true);
      LODOP.SET_PRINT_STYLE('FontSize', 18) //设置对象风格
      LODOP.SET_PRINT_STYLE('Bold', 1) ////设置对象风格
      LODOP.SET_PRINT_PAGESIZE(0, 2000, 2000, '') //设定纸张大小
      LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', '55%')//设置缩放
      LODOP.SET_PREVIEW_WINDOW(2, 2, 0, 0, 0, '')//设置窗口
    },
    doAdd () {
      if (this.orderNo) {
        this.$router.push({ path: '/prod/order/send/add', query: { orderNo: this.orderNo, customerName: this.entity.customerName, customerCode: this.entity.customerCode } })
      } else {
        MessageBox.alert("请选择订单");
      }
    },
    doEdit (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.$router.push({ path: '/prod/order/send/edit', query: { orderNo: this.orderNo, customerName: this.entity.customerName, customerCode: this.entity.customerCode, sendCode: row.sendCode } })
      }
    },
    doExport (row) {
      this.exportOp(row.sendCode).then(data => {
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = URL.createObjectURL(data);
        link.setAttribute("download", decodeURI("发货明细"));
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    },
    doPrintView (row) {
      //  const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        if (this.template) {
          eval(this.template)
          //动态数据
          LODOP.PREVIEW() //打印预览
        } else {
          MessageBox.alert("请先配置唛头");
        }
      }
    },
    doPrint (row) {
      if (this.template) {
        //const row = this.$refs['mainGrid'].getSelectOne()
        let _this = this
        if (row) {
          MessageBox.confirm('是否打印?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //查询数据
            this.sendData(row.sendCode).then(data => {
              if (data) {
                data.forEach((item, index) => {
                  eval(_this.template)
                  item.forEach((citem, cindex) => {
                    LODOP.SET_PRINT_STYLEA(citem.propertyName, "CONTENT", citem.propertyValue);
                  })
                  LODOP.PRINT()
                })
              }
            })
          })
        }
      } else {
        MessageBox.alert("请先配置唛头");
      }
    },
    doView (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.$router.push({ path: '/prod/order/send/view', query: { orderNo: this.orderNo, customerName: this.entity.customerName, customerCode: this.entity.customerCode, sendCode: row.sendCode } })
      }
    },
    openOrder () {
      this.$refs['orderGridDialog'].show()
    },
    selectOrderData (row) {
      this.orderNo = row.orderNo
      this.initData()
    },
    initTemplate (customerCode) {
      this.templateOp(customerCode).then(data => {
        if (data) {
          this.template = data.template
        }
      })
    },
    sendData (sendCode) {
      return request({
        url: url.SEND_PRINT_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'sendCode': sendCode }
      })
    },
    templateOp (code) {
      return request({
        url: url.CUSTOMER_TEMPLATE_VIEW_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'customerCode': code }
      })
    },
    doCancel (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.cancelOp(row.sendCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    cancelOp (sendCode) {
      return request({
        url: url.SEND_CANCEL_URL,
        method: 'post',
        data: { key: 'key' },
        params: { sendCode: sendCode }
      })
    },
    doDelete (row) {
      //const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.deleteOp(row.sendCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    deleteOp (sendCode) {
      return request({
        url: url.SEND_DELETE_URL,
        method: 'post',
        data: { key: 'key' },
        params: { sendCode: sendCode }
      })
    },
    exportOp (sendCode) {
      return request({
        url: url.SEND_EXPORT_URL,
        method: 'post',
        responseType: "blob",
        data: { taskKey: sendCode }
      })
    },
    doPass (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.passOp(row.sendCode).then(data => {
          if (data) {
            this.$refs['mainGrid'].reload()
          }
        })
      }
    },
    passOp (sendCode) {
      return request({
        url: url.SEND_PASS_URL,
        method: 'post',
        data: { key: 'key' },
        params: { sendCode: sendCode }
      })
    },
    initData () {
      this.queryEntity.orderNo = this.orderNo
      this.viewUrl(this.orderNo).then(data => {
        if (data) {
          this.entity = data
          this.$refs['mainGrid'].doQuery()
          this.initTemplate(data.customerCode)
        }
      })
    },
    viewUrl (orderNo) {
      return request({
        url: url.ORDER_VIEW_URL,
        method: 'post',
        data: { key: 'key' },
        params: { orderNo }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-body {
  padding-top: 8px;
}
.w-table {
  border: 1px solid #ebeef5;
}
.w-table-title {
  border: 1px solid #ebeef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  vertical-align: middle;
  width: 100%;
  font-size: 14px;
  color: gray;
}
</style>
